   <%--
      Created by IntelliJ IDEA.
      User: LSK
      Date: 2019/10/17
      Time: 17:02
      To change this template use File | Settings | File Templates.
    --%>
   <%@ page contentType="text/html;charset=UTF-8" language="java" %>
   <html>

   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>西安学车管家</title>
       <link rel="shortcut icon" href="img/bitbug_favicon.ico">
       <title>管理员:管理员批量导入保单信息或者单个导入保单信息</title>
       <base target="_blank" />
       <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
       <link rel="stylesheet" href="layui/layui/css/layui.css">
   </head>
   <style>
       body {
           margin: 0;
           padding: 0;
           background-color: rgb(241, 241, 241);
       }

       #search {
           background: #ffffff;
           box-shadow: 2px 0px 15px 1px rgb(231, 231, 231);
       }

       #search li {
           border-bottom: 1px solid rgb(255, 255, 255);
       }

       #search li:hover {
           border-bottom: 1px solid #5FB878;
       }

       #search .navbar-brand:hover,
       #search li a:hover {
           color: #5FB878;
       }

       .container {
           background: #fff;
       }

       input {
           padding-bottom: 20px;
       }

       .ipt {
           float: left;
           width: 33%;
       }

       .layui-form-label {
           width: 100px;
       }

       .layui-inline {
           margin-left: -30px;
       }
   </style>

   <body>
       <!--导航条-->
       <nav class="navbar navbar-default " id="search">
           <div class="container">
               <!-- Brand and toggle get grouped for better mobile display -->
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                       data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
                   <a target="_blank"  class="navbar-brand" href="index.jsp" data-toggle="tooltip" data-placement="bottom"
                       title="返 回 首 页">
                       <img src="asset/logoBig.png" style="width: 100px;height:38px;margin-top: -7px" alt="">
                   </a>
               </div>

               <!-- Collect the nav links, forms, and other content for toggling -->
               <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                   <ul class="nav navbar-nav">
                       <li><a target="_blank"  href="showusers.jsp?page=0">查看所有学员基本信息 <span class="sr-only"></span></a></li>
                       <li><a target="_blank"  href="adduser.jsp">批量导入学员基本信息</a></li>
                       <li><a target="_blank"  href="payfor.jsp?page=0">处理学员理赔信息</a></li>
                       <li><a target="_blank"  href="showschools.jsp">驾校信息查看</a></li>
                   </ul>
                   <ul class="nav navbar-nav navbar-right">


                   </ul>
               </div><!-- /.navbar-collapse -->
           </div><!-- /.container-fluid -->
       </nav>
       <!-- 内容主体 -->
       <div class="container">
           <div class="layui-col-md12">
               <div class="layui-card">
                   <div class="layui-card-header">
                       <h2 class="h2">单个导入</h2>
                   </div>
                   <div class="layui-card-body">
                       <form method="post" class="form-inline layui-form">
                           <div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="name"></label>
                                   <!--&nbsp-->
                                   学员姓名&nbsp;&nbsp;&nbsp;<input type="text" name="name" class="form-control" id="name">
                               </div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="phonenum"></label>
                                   学员手机号码&nbsp;<input type="text" name="phonenum" class="form-control" id="phonenum">
                               </div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="idnum"></label>
                                   学员身份证号码<input type="text" name="idnum" class="form-control" id="idnum">
                               </div>
                           </div>
                           <br>
                           <br>
                           <div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="id2"></label>
                                   保单号码(个人凭证)<input type="text" name="idnum" class="form-control" id="id2">
                               </div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="type"></label>
                                   投保类型&nbsp;&nbsp;&nbsp;<input name="type" type="text" class="form-control" id="type">
                               </div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="prod"></label>
                                   投保阶段&nbsp;&nbsp;&nbsp;<input name="prod" type="text" class="form-control" id="prod">
                               </div>
                           </div>
                           <br>
                           <br>
                           <div class="layui-form-item">
                               <div class="form-group ipt">
                                   <label class="sr-only" for="money"></label>
                                   投保金额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="money"
                                       class="form-control" id="money">
                               </div>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="schoolnum"></label>
                                   驾校联系人号码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="schoolnum"
                                       class="form-control" id="schoolnum">
                               </div>
                               <!--<div class="layui-inline">
                                   <label class="layui-form-label">日期选择</label>
                                   <div class="layui-input-block">
                                       <input type="text" name="date" id="date1" autocomplete="off"
                                           class="form-control">
                                   </div>
                               </div>
                               -->
                               <div class="layui-inline">
                                   <label class="layui-form-label">生效时间</label>
                                   <div class="layui-input-inline">
                                       <input type="text" name="starttime" id="starttime" lay-verify="date"
                                           placeholder="生效时间" autocomplete="off" class="form-control">
                                   </div>
                                   <!--<input type="text" placeholder=".col-md-2" class="form-control">-->
                               </div>
                               <div class="layui-inline" style="margin-left: 52px;">
                                   <label class="layui-form-label">失效时间</label>
                                   <div class="layui-input-inline">
                                       <input type="text" name="endtime" id="endtime" lay-verify="date"
                                           placeholder="失效时间" autocomplete="off" class="form-control">
                                   </div>
                                   <!--<input type="text" placeholder=".col-md-2" class="form-control">-->
                               </div>
                           </div>

                           <!--div class="form-group ipt">
                                   <label class="sr-only" for="starttime"></label>
                                   生效时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input type="date" name="starttime"
                                       class="form-control" id="starttime">
                               </div>
                               <br><br>
                               <div class="form-group ipt">
                                   <label class="sr-only" for="endtime"></label>
                                   失效时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：<input type="date" name="endtime"
                                                                                   class="form-control" id="endtime">
                               </div>
                           </div>
-->

                           <!--
        <div class="form-group ipt">
            <label class="sr-only" for="holder"></label>
            投保人姓名&nbsp;&nbsp;：<input type="text" name="holder" class="form-control" id="holder">
        </div><br>
        <div class="form-group ipt">
            <label class="sr-only" for="backcard"></label>
            投保人银行卡号：<input type="text"  name="backcard" class="form-control" id="backcard" >
        </div><br>
         -->
                           <button type="button" onclick="check()" class="btn btn-success ">导入该学员的基本信息</button>
                        </form>
                   </div>
               </div>
           </div>
           <hr class="layui-bg-green">
           <br>
           <div class="layui-col-md12">
               <div class="layui-card">
                   <div class="layui-card-header">
                       <h2>通过Excle批量导入</h2>
                   </div>
                   <div class="layui-card-body">
                       <%
        //String serverPath = request.getServletContext().getRealPath("/").replace("\\", "/");
        String exclePath=request.getServletContext().getContextPath()+"/批量导入模板.xls";
        pageContext.setAttribute("path",exclePath);
        //System.out.println(exclePath);
    %>
                       <a target="_blank" href="${pageScope.path}" style="text-decoration:underline; color: blue">
                           <!--download="批量导入模板.xls"-->点击此处下载Excle导入模板</a>
                       <form method="post" enctype="multipart/form-data">
                           <label>上传Excle<input id="files" name="files" type="file"></label>
                           <button class="btn btn-success" id="btn" type="button">
                               批量导入
                           </button>
                           <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
                               <button data-method="confirmTrans" class="layui-btn"
                                   style="display: none">配置一个透明的询问框</button>
                           </div>

                       </form>
                   </div>
               </div>
           </div>

       </div>
       <script src="bootstrap/dist/js/jquery-3.4.1.min.js"></script>
       <script src="bootstrap/dist/js/bootstrap.min.js"></script>
       <script src="bootstrap/dist/js/layui/layui.all.js"></script>
       <script>
           layui.use(['form', 'layedit', 'laydate'], function () {
               var form = layui.form,
                   layer = layui.layer,
                   layedit = layui.layedit,
                   laydate = layui.laydate;

               //日期
               laydate.render({
                   elem: '#starttime'
               });
               laydate.render({
                   elem: '#endtime'
               });
               laydate.render({
                   elem: '#date1'
               });
               //创建一个编辑器
               var editIndex = layedit.build('LAY_demo_editor');

               //自定义验证规则
               form.verify({
                   title: function (value) {
                       if (value.length < 5) {
                           return '标题至少得5个字符啊';
                       }
                   },
                   pass: [
                       /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'
                   ],
                   content: function (value) {
                       layedit.sync(editIndex);
                   }
               });

               //监听指定开关
               form.on('switch(switchTest)', function (data) {
                   layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                       offset: '6px'
                   });
                   layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
               });

               //监听提交
               form.on('submit(demo1)', function (data) {
                   layer.alert(JSON.stringify(data.field), {
                       title: '最终的提交信息'
                   });
                   return false;
               });
           });


           $('#btn').click(function () {
               var file = $('#files')[0].files[0];

               var formData = new FormData();

               formData.append("file", $("#files")[0].files[0]);

               $.ajax({
                   url: 'doExcleUpload',
                   dataType: 'text',
                   type: 'POST',
                   async: false,
                   data: formData,
                   processData: false, // 使数据不做处理
                   contentType: false, // 不要设置Content-Type请求头
                   success: function (data) {

                       //alert(data);
                      // console.log(data);
                           //alert(data);
                           layui.use('layer', function () {
                               var layer = layui.layer;

                               layer.msg(data, {
                                   time: 20000, //20s后自动关闭
                                   btn: ['确认']
                               });
                               $('.layui-layer-msg').css('backgroundColor',
                                   'rgba(0,150,136,0.5)');

                           });

                   },
                   error: function (data) {
                       //console.log(response);
                       layui.use('layer', function () {
                           var layer = layui.layer;

                           layer.msg(data, {
                               time: 20000, //20s后自动关闭
                               btn: ['确认']
                           });
                           $('.layui-layer-msg').css('backgroundColor',
                               'rgba(0,150,136,0.5)');

                       });
                   }
               });

           })
       </script>
       <script>
           //前端认证录入表单信息
           function rt_length(obj) {
               return obj.length === 0;
           }

           function check() {
               var phonenum = $("#phonenum").val();
               var idcard = $("#idnum").val();
               var type = $("#type").val();
               var prod = $("#prod").val();
               var money = $("#money").val();
               var starttime = $("#starttime").val();
               var endtime = $("#endtime").val();
               //非空检验
               if (rt_length(phonenum) || rt_length(idcard) || rt_length(type) || rt_length(prod) || rt_length(money) ||
                   rt_length(starttime) || rt_length(endtime)) {
                   //alert("所有信息均不能为空！！请检查后重新输入");
                   layui.use('layer', function () {
                       var layer = layui.layer;

                       layer.msg('所有信息均不能为空！！<br>请检查后重新输入', {
                           time: 20000, //20s后自动关闭
                           btn: ['确认']
                       });
                       $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                   });
                   //return  false;
               } else if (phonenum.length !== 11 || idcard.length !== 18) {
                   layui.use('layer', function () {
                       var layer = layui.layer;

                       layer.msg('手机号或身份证号码检验失败，请重新输入。<br>手机号必须为11位，身份证号码必须位18位。', {
                           time: 20000, //20s后自动关闭
                           btn: ['确认']
                       });
                       $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                   });
                   //alert("手机号或身份证号码检验失败，请重新输入。手机号必须为11位，身份证号码必须位18位。");
                   //return false;
               } else {

                   $.ajax({
                       url: "${pageContext.request.contextPath}/doAddUser", // 请求路径
                       type: "POST", //请求方式
                       //data: "username=jack&age=23",//请求参数
                       data: {
                           "name": $("#name").val(),
                           "phonenum": $("#phonenum").val(),
                           "idnum": $("#idnum").val(),
                           "id2": $("#id2").val(),
                           "type": $("#type").val(),
                           "prod": $("#prod").val(),
                           "money": $("#money").val(),
                           "schoolnum": $("#schoolnum").val(),
                           "starttime": $("#starttime").val(),
                           "endtime": $("#endtime").val()
                       },
                       success: function (data) {
                           //alert(data);
                           /*
                           重要修改，替换js原生弹出框，修改为模态框
                           */

                           layui.use('layer', function () {
                               var layer = layui.layer;

                               layer.msg(data, {
                                   time: 20000, //20s后自动关闭
                                   btn: ['确认']
                               });
                               $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                           });


                           console.log(data);
                       }, //响应成功后的回调函数
                       error: function () {
                           layui.use('layer', function () {
                               var layer = layui.layer;

                               layer.msg(data, {
                                   time: 20000, //20s后自动关闭
                                   btn: ['确认']
                               });
                               $('.layui-layer-msg').css('backgroundColor', 'rgba(0,150,136,0.5)');

                           });
                       }, //表示如果请求响应出现错误，会执行的回调函数

                       dataType: "text" //设置接受到的响应数据的格式
                   });
               }
           }
       </script>
       <script>
           /* 鼠标特效 */
           var a_idx = 0;
           jQuery(document).ready(function ($) {
               $("body").click(function (e) {
                   var a = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
                   var $i = $("<span/>").text(a[a_idx]);
                   a_idx = (a_idx + 1) % a.length;
                   var x = e.pageX,
                       y = e.pageY;
                   $i.css({
                       "z-index": 9999999999999999999999999999999999999999,
                       "top": y - 20,
                       "left": x,
                       "position": "absolute",
                       "font-weight": "bold",
                       "color": "#ff6651"
                   });
                   $("body").append($i);
                   $i.animate({
                           "top": y - 180,
                           "opacity": 0
                       },
                       1500,
                       function () {
                           $i.remove();
                       });
               });
           });
           //alert("用户名不存在，请联系管理员");
       </script>
       <script>
           $(function () {
               $('[data-toggle="tooltip"]').tooltip()
           })
       </script>
   </body>

   </html>